<template>
  <div>
    <!-- 弹出菜单 -->
    <van-action-sheet v-model="menuShow" :actions="menu" @select="onSelect" cancel-text="取消" />
    <div
      v-for="(item, index) in list"
      :key="item.id"
      class="list flex m-t-10 bg-white p-v-15 p-h-10"
    >
      <router-link :to="`/goods/detail/${item.id}`" class="w-100 min-h-100">
        <img class="w-full b-r-4 fs-rem-12px" :src="item.picture" alt="logo" />
      </router-link>
      <router-link :to="`/goods/detail/${item.id}`" class="flex-1 m-l-10 relative">
        <div class="flex j-between">
          <p class="text-title fs-rem-14px overflow-many">{{item.gname}}</p>
        </div>
        <!-- method 1. 折扣 2. 现金 -->
        <div class="absolute bottom-0 w-full">
          <p class="fs-rem-14px m-b-3" v-if="item.method === 1">
            <span class="text-red">{{parseFloat(item.zk / 10) || '-'}}折</span>
            <s class="text-grey m-l-5 fs-rem-12px">{{item.fprice ? '¥' : ''}}{{item.fprice}}</s>
          </p>
          <p class="fs-rem-14px m-b-3" v-else>
            <span class="text-red fs-rem-16px">¥{{item.nprice}}</span>
            <s class="text-grey m-l-5 fs-rem-12px">¥{{item.fprice || ''}}</s>
          </p>
          <p class="text-grey fs-rem-12px">日预约限额: {{item.yye}}{{item.unit}}</p>
          <p class="text-grey fs-rem-12px">日消费限额: {{item.rxe}}{{item.unit}}/人</p>
        </div>
      </router-link>
      <div class="flex-column a-end j-between m-l-10">
        <van-icon
          @click="handleOpenMenu(item, index)"
          class="fs-rem-20px m-l-10 text-grey"
          name="ellipsis"
        />
        <van-button
          @click="handleSubmit()"
          class="text-white bg-yellow b-none"
          size="small"
          :disabled="item.status === 2"
        >{{item.status === 2 ? '已下架': '下单'}}</van-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      required: true
    }
  },
  data () {
    return {
      menuShow: false,
      menu: [],
      selectGoodsId: 0
    }
  },
  methods: {
    handleOpenMenu (item) {
      this.selectGoodsId = item.id
      this.menu = [
        { name: item.status === 1 ? '下架' : '上架' }
      ]
      this.menuShow = true
    },
    onSelect (item, index) {
      let status
      // 点击选项时默认不会关闭菜单，可以手动关闭
      this.show = false
      switch (item.name) {
        case '上架':
          status = 1
          break
        case '下架':
          status = 2
          break
      }
      this.handleUpdateStatus(this.selectGoodsId, status)
    },
    async handleUpdateStatus (id, statusNum) {
      let { message, status } = await this.$api.post('/zxGd/updateStatus', {
        id,
        status: statusNum
      })
      if (status === 0) {
        this.$toast.success(message)
        this.changeStatus(id, statusNum)
      } else {
        this.$toast.fail(message)
      }
      this.menuShow = false
    },
    changeStatus (id, status) {
      this.$emit('changeGoodsStatus', { id, status })
    },
    handleSubmit () {
      console.log(1)
    }
  }
}
</script>
